<template>
    <div id="mapContainer" ref="mapContainer" class="content_map_body">
    </div>
</template>
<script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map'
import Config from '@/config/index'
import IdentityManager from '@arcgis/core/identity/IdentityManager'
import Basemap from '@arcgis/core/Basemap'
import MapView from '@arcgis/core/views/MapView'

let map = null
let mapView = null

const arcGisConfig = Config.arcGisConfig || {
    URL: '',
    appendStr: '',
    token: '',
    baseMapArr: [],
    center: [110.03316, 18.526986],
    zoom: 14
}

let portalURL = arcGisConfig.URL
let appendStr = arcGisConfig.appendStr
let token = arcGisConfig.token
let baseMapArr = arcGisConfig.baseMapArr

onMounted(() => {
    initMap()
})

const initMap = () => {
    if (!token) {
        console.warn('Token not available, skipping IdentityManager registration')
    } else {
        IdentityManager.registerToken({
            server: portalURL + appendStr + '/sharing/rest/',
            token: token
        })
    }
    let basemap = new Basemap({
        portalItem: {
            id: baseMapArr[0] || '',
            portal: {
                url: portalURL + appendStr + '/'
            }
        }
    })
    map = new Map({
        basemap: basemap
    })
    mapView = new MapView({
        container: 'mapContainer', // reference the div id
        map: map,
        zoom: arcGisConfig.zoom,
        center: arcGisConfig.center
    })

}

</script>
<style lang="scss" scoped>
.content_map_body {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
</style>